<template>
  <div class="app-container">
    <el-alert
      :title="item.cn_name + ' ( ' + item.en_name + ' ) '"
      type="success"
      effect="dark"
    />
    <el-divider content-position="left">封面图片 (<span style="color: red;">同时只能存在一张</span>)</el-divider>
    <div class="block">
      <el-upload
        class="upload-cover-image"
        :action="imageUploadUrl"
        :on-preview="handlePreview"
        :on-remove="handleImageRemove"
        :file-list="imageCoverList"
        :data="{id:currentItemId, type:'cover'}"
        list-type="picture-card"
      >
        <i class="el-icon-plus" />
      </el-upload>
    </div>
    <el-divider content-position="left">列表图片</el-divider>
    <div class="block">
      <el-upload
        class="upload-list-image"
        :action="imageUploadUrl"
        :on-preview="handlePreview"
        :on-remove="handleImageRemove"
        :file-list="imageViewList"
        :data="{id:currentItemId, type:'list'}"
        list-type="picture-card"
      >
        <i class="el-icon-plus" />
      </el-upload>
    </div>

  </div>
</template>

<script>
import { elementImageList, elementImageUpload, elementImageDel } from '@/api/element'
import waves from '@/directive/waves' // waves directive

export default {
  name: 'TouristImageList',
  components: { },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      item: [],
      imageCoverList: [],
      imageViewList: [],
      currentItemId: 0,
      imageUploadUrl: process.env.VUE_APP_BASE_API + 'tourist/image/upload',
      imageFileList: [],
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      searchData: {
        pageIndex: 1,
        pageSize: 20,
        id: 0
      },
      dialogUploadVisible: false,
      dialogUploadStatus: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      this.searchData.id = this.$route.params.id
      this.currentItemId = this.$route.params.id
      elementImageList(this.$route.params.id).then(response => {
        this.imageCoverList = response.data.image.cover
        this.imageViewList = response.data.image.list
        this.item = response.data.item
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleUploadImage(id) {
      // 获取图片
      elementImageUpload(id).then((response) => {
        if (response.success !== true) {
          this.$notify({
            title: '错误',
            message: response.msg,
            type: 'error',
            duration: 2000
          })

          return true
        }
      })
      this.dialogUploadVisible = true
      this.currentItemId = id
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleImageRemove(data) {
      // 获取图片
      elementImageDel({ id: data.id }).then((response) => {
        if (response.success !== true) {
          this.$notify({
            title: '错误',
            message: response.msg,
            type: 'error',
            duration: 2000
          })
          return true
        }

        this.$notify({
          title: '提示',
          message: '删除成功!',
          type: 'notice',
          duration: 2000
        })
      })
    }
  }
}
</script>
<style scoped>
  .el-image{
    overflow:inherit;
  }
</style>
